<template>
  <div id="msite">
    <!-- "goback", "signinUp", "headerTitle", -->
    <Header signinUp="true" :headerTitle="titleAddress" :fromCity="fromCity">
      <router-link to="/search" slot="search" class="search-icon">
        <span class="icon iconfont icon-sousuo"></span>
      </router-link>
    </Header>
    <div class="outer-scroll">
      <div class="msite-content">
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-page" v-for="navsitem in navslist">
              <div v-for="item in navsitem" class="nav-content">
                <router-link
                  :to="{
                    path: item.path,
                    query: {
                      geohash,
                      title: item.title,
                    },
                  }"
                  class="nav-item"
                >
                  <img :src="imgBaseUrl + item.image_url" alt="" />
                  <span>{{ item.title }}</span>
                </router-link>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
          <!--分页器。如果放置在swiper外面，需要自定义样式。-->
        </div>
      </div>
      <shop-list v-if="hasGetData"></shop-list>
    </div>

    <!-- :latitude="latitude" :longitude="longitude" -->
    <foot-guide></foot-guide>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import footGuide from "../../components/footer/footGuide";
import Header from "../../components/header/header";
import shopList from "../../components/common/shopList";
import { msiteFoodTypes, cityGuess, msiteAddress } from "../../service/getData";
import { setStore } from "@/config/utils.js";

// import FootGuide from '../../components/footer/footGuide.vue'

export default {
  data() {
    return {
      pageNavList: [],
      hasGetData: false,
      titleAddress: "",
      navslist: [],
      fromCity: "",
      imgBaseUrl: "https://fuss10.elemecdn.com", //图片域名地址,
    };
  },
  components: { footGuide, Header, shopList },

  beforeMount() {
    this.initData();
  },
  methods: {
    ...mapMutations(["RECORD_ADDRESS", "SAVE_GEOHASH"]),
    async initData() {
      // geohash 经纬度
      // address 具体位置信息

      let geohash = this.$route.query.geohash;
      if (!geohash) {
        //获取当前城市
        let res = await cityGuess();
        console.log(res);
        geohash = `${res.latitude},${res.longitude}`;
      }
      // 获取经纬度,保存在本地
      setStore("geohash", { geohash });
      //获取经纬度，保存在Vuex中
      this.SAVE_GEOHASH(geohash);

      // 根据经纬度查询具体位置
      let address = await msiteAddress(geohash);
      this.fromCity = address.city;
      this.titleAddress = address.name;

      let obj = {
        latitude: address.latitude,
        longitude: address.longitude,
      };
      // 保存具体位置经纬度到Vuex中
      this.RECORD_ADDRESS(obj);
      // 对子组件的获取数据很重要 子组件设置v-if ，子组件重新获取父组件的数据 不然会导致子组件获取不到数据
      this.hasGetData = true;
      //获取导航食品类型列表
      msiteFoodTypes(geohash)
        .then((res) => {
          console.log(res);
          // 将数据分页
          let foodList = [...res];
          let foodarr = [];
          for (let i = 0, j = 0; i < foodList.length; i + 8, j++) {
            foodarr[j] = foodList.splice(0, 8);
          }
          this.navslist = foodarr;
        })
        .then((val) => {
          var mySwiper = new Swiper(".swiper", {
            autoplay: true, //可选选项，自动滑动
            pagination: {
              el: ".swiper-pagination",
            },
          });
        });
    },
  },
  computed: {
    // , "latitude", "longitude"
    ...mapState(["geohash"]),
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

// .swiper {
//   --swiper-theme-color: white;
//   --swiper-pagination-color: $blue; /* 两种都可以 */
// }
// .msite {
//   width: 100%;
//   height: 100%;
// }

.search-icon {
  margin-left: 0.3rem;
  display: block;
  @include ct;

  span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
}
.icon {
  @include sc(0.7rem, white);
}
.swiper-page {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 1.5rem;
}
.nav-content {
  width: 25%;
  margin-top: 0.7rem;

  .nav-item {
    @include wh(100%, 100%);
    @include fj;
    flex-direction: column;
    align-items: center;
    img {
      @include wh(1.7rem, 1.7rem);
    }
    span {
      @include sc(0.55rem, #666666);
    }
  }
}
</style>
